//
//  XQButtonView.swift
//  XQSwiftUIDemo
//
//  Created by sinking on 2019/11/16.
//  Copyright © 2019 WXQ. All rights reserved.
//

import SwiftUI

struct XQButtonView: View {
    
    @State var btn5State: Bool = false
    
    var body: some View {
        VStack {
            
            // 最基础button, 点击时间和文字
            Button.init("btn1, 点击我") {
                print("点击1")
            }
            .padding()
            .background(Color.orange)
            .cornerRadius(20)
            .shadow(radius: 10)
            
            
            // 图片 和 文字 button
            Button(action: {
                print("点击来")
            }) {
                // 默认是横向布局(HStack)
                // 图片和文字都默认渲染成 foregroundColor, foregroundColor 默认为蓝色
                // 图片会撑开 button
                Image("back")
                    .cornerRadius(10)
                Text("btn2\n点击")
            }
            .padding()
            .background(Color.orange)
            .cornerRadius(20)
            .shadow(radius: 10)
            
            
            Button(action: {
                print("点击来")
            }) {
                // 包裹一层 VStack，变为上下
                VStack {
                    Text("btn3, 点击")
                    Image("back")
                        // 渲染, 保持原图片
                        .renderingMode(.original)
                        .cornerRadius(10)
                }
            }
                // 字体颜色, 和默认图片渲染色
                .foregroundColor(Color.red)
                .padding()
                .background(Color.orange)
                .cornerRadius(20)
                .shadow(radius: 10)
            
            
            Button(action: {
                print("点击")
            }) {
                // 包裹一层 VStack，变为上下
                VStack {
                    Text("btn4")
                        // 单独设置文字颜色
                        .foregroundColor(Color.red)
                    Image("back")
                        // 设置要跟随 frame 固定大小
                        .resizable()
                        // 渲染, 保持原图片
                        .renderingMode(.original)
                        // 设置图片固定大小, 60 x 60
                        .frame(width: 60, height: 60)
                        .cornerRadius(10)
                }
            }
            .padding()
            .background(Color.orange)
            .cornerRadius(20)
            .shadow(radius: 10)
            
            
            // 带点击button
            Button.init(action: {
                print("点击")
                // 状态反转
                self.btn5State.toggle()
            }) {
                VStack {
                    // 增加点击
                    Text(self.btn5State ? "btn5, 已选中" : "btn5, 未选中")
                        // 单独设置文字颜色
                        .foregroundColor(Color.red)
                    Image(self.btn5State ? "back" : "back2")
                        // 设置要跟随 frame 固定大小
                        .resizable()
                        // 渲染, 保持原图片
                        .renderingMode(.original)
                        // 设置图片固定大小, 60 x 60
                        .frame(width: 60, height: 60)
                        .cornerRadius(10)
                }
            }
            .padding()
            .background(self.btn5State ? Color.orange : Color.gray)
            .cornerRadius(20)
            .shadow(radius: 10)
            
            Button.init(action: {
                print("点击")
                self.btn5State.toggle()
            }) {
                VStack {
                    Text(self.btn5State ? "btn6, 已选中" : "btn6, 未选中")
                        // 单独设置文字颜色
                        .foregroundColor(Color.red)
                    
                    // 也能如此判断点击
                    if self.btn5State {
                        Image("back")
                            // 设置要跟随 frame 固定大小
                            .resizable()
                            // 渲染, 保持原图片
                            .renderingMode(.original)
                            // 设置图片固定大小, 60 x 60
                            .frame(width: 60, height: 60)
                            .cornerRadius(10)
                    }else {
                        HStack{
                            Image("back2")
                            Image("back2")
                        }
                    }
                    
                }
            }
            .padding()
            .background(self.btn5State ? Color.orange : Color.gray)
            .cornerRadius(20)
            .shadow(radius: 10)
        }
        
        
        
        
    }
}

struct XQButtonView_Previews: PreviewProvider {
    static var previews: some View {
        XQButtonView()
    }
}
